<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加产品</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style>
		body{    background: #Fff;} .overlay, .overlay select, .overlay .form-dropdown { width: 142px; }i.icon.icon_error_red{}
		</style>
	</head>

	<body>
		<div class="form" style="padding:40px;">
			<input type="hidden" value="" class="productId"  />
			<form class="block-form" id="commentForm">
				<div style="margin-top:0px;">
					<label><span class="red">*</span>产品名称：</label>
					<input type="text" class="pro_name" placeholder="请输入产品名称" name="proname" id="proname" />
				</div>
				<div>
					<label><span class="red">*</span>产品图片：</label>
					<div class="inline-block"  style="vertical-align: top;">
						<table>
							<tr>
								<td><img src="images/defaultImg.png" class="pro_img" /></td>
								<td style="padding-left:20px;">
									<p style="margin-bottom:26px;">尺寸为500*500，支持JPG、PNG等格式，<br/>图片需小于500K。</p>
									<span class="search-input-button border-radius bgblue" style="margin-right:0px;">选择上传</span>
									<label class="hidden error_notice"><i class="icon icon_error_red"></i><span class="error">请上传产品图片</span></label>
								</td>
							</tr>
						</table>
					</div>

				</div>

				<div class="select-city">
					<label><span class="red">*</span>产品产地：</label>
					<div class="overlay">
						<!--这个是用来存放选中的select的值的-->
						<input type="hidden" value="" class="form-select-value" id="provname"  />
						<div class="dropdown">
							<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value text-ellipsis pro_provincevalue">选择省份</span>
				                                <span class="caret"></span>
				            </button>
				            <ul class="select select_prov none"></ul>
				            <select class="prov hidden none "  style="margin-top:20px;"></select>
						</div>
						
					</div>
					<div class="overlay" style="margin-left:18px;">
						<!--这个是用来存放选中的select的值的-->
						<input type="hidden" value="" class="form-select-value"  id="cityname"   />
						<div class="dropdown">
							<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value text-ellipsis pro_cityvalue">选择城市</span>
				                                <span class="caret"></span>
				                           </button>
				           
							<ul class="select  select_city none" ></ul>
							<select class="city hidden none " style="margin-top:20px;" ></select>
						</div>
					</div>
				    <input type="text" class="proarea"  name="proarea" id="proarea"  style="visibility: hidden; width:0px;"/>
				</div>

				<div>
					<label><span class="red">*</span>产品分类：</label>
					<div class="overlay">
						<!--这个是用来存放选中的select的值的-->
						<input type="hidden" value="" class="form-select-value catevalue" />
						<div class="dropdown">
							<button class="dropdown-toggle form-dropdown" type="button">
				                    <span class="value text-ellipsis pro_catevalue">请选择一级分类</span>
				                    <span class="caret"></span>
				            </button>
				            <ul class="none">
								<li data-value='001'>1</li>
								<li data-value='002'>2</li>
								<li data-value='003'>3</li>
								<li data-value='004'>4</li>
								<li data-value='001'>1</li>
								<li data-value='002'>2</li>
								<li data-value='003'>3</li>
								<li data-value='004'>4</li>
							</ul>
						</div>
					</div>
					<span class="colorblue text-underline" style="margin-left:18px;">分类管理</span>
					<input type="text" value="" class="form-select-value" name="catename" id="catename" style="visibility: hidden; width:0px;" />
				</div>

				<div>
					<label><span class="red hidden">*</span>产品介绍：</label>
					<textarea style="width:442px;height:163px;vertical-align: top;" class="pro_desc" name="prodesc" id="prodesc" ></textarea>
				</div>
				<div>
					<label  class="hidden"><span class="red hidden">*</span>产品名称：</label>
					<input type="submit" value="保存" class="search-input-button" id="subButton" />
				    <input type="button" value="取消" class="search-input-button bgblue" id="backButton" />
				</div>
			</form>
		</div>

		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cxselect.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
		
		$.validator.setDefaults({
			submitHandler: function() {
				//这里放验证成功之后要执行的函数
				
			}
		});

		//这里是验证省市
		$.validator.addMethod("isareaEmpty", function(value, element) {
			if($('#provname').val() && $('#cityname').val()){
				return true;
			}else{return false;}
		}, "<i class=\" icon icon_error_red \"></i>请选择省市！");
		
		//这里是验证产品类型
		$.validator.addMethod("iscateEmpty", function(value, element) {
			if($('.catevalue').val()){
				return true;
			}else{return false;}
		}, "<i class=\" icon icon_error_red \"></i>请选择产品类型！");
		
		
		$(document).ready(function() {
			$("#commentForm").validate({
				rules: {
					proname: {
						required: true,
					},
					proarea: {
						isareaEmpty: true,
					},
					catename: {
						iscateEmpty: true,
					},
					prodesc: {
						required: true,
					},
				},
				messages: {
					proname: {
						required: "<i class=\" icon icon_error_red \"></i>请输入产品名称",
					},
					
					prodesc: {
						required: "<i class=\" icon icon_error_red \"></i>请输入产品描述",
					},
				},
				errorPlacement: function(error, element) {
					error.appendTo('<i class=\" icon icon_error_red \"></i>').appendTo(element.parent());
				},
			});
		});
		
		
			$(function() {
				productObj.staticPath='js/cityData.min.json'
				productObj.productInit();
                //productObj.getProData();
			})

		</script>

	</body>

</html>